<template>
  <div class="page-container">
    <!-- 主要内容 -->
    <div class="main-content">
      <div class="hero-section">
        <div class="hero-content">
          <h1 class="main-title">Hearing Loss Gene Database</h1>
          <p class="subtitle">A comprehensive database for hereditary hearing loss research</p>

          <div class="stats-container">
            <div class="stat-item">
              <div class="stat-number">10,000+</div>
              <div class="stat-label">Genetic Records</div>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <div class="stat-number">5,000+</div>
              <div class="stat-label">Research Data</div>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <div class="stat-number">50,000+</div>
              <div class="stat-label">Search Queries</div>
            </div>
          </div>

          <button class="search-button" @click="showModal">
            <span>Start Searching</span>
            <i class="search-icon">🔍</i>
          </button>
        </div>
      </div>

      <div class="intro-section">
        <div class="intro-content">
          <h2>About Our Database</h2>
          <p>Our database provides comprehensive information about hereditary hearing loss, including genetic variations, protein interactions, and geographical distribution patterns. Researchers can access detailed data through three main search approaches:</p>

          <div class="search-methods">
            <div class="method-card">
              <h3>Genetic Search</h3>
              <p>Search through comprehensive genetic data including variations and mutations associated with hearing loss.</p>
            </div>
            <div class="method-card">
              <h3>Protein Analysis</h3>
              <p>Explore protein structures and interactions related to hearing mechanisms.</p>
            </div>
            <div class="method-card">
              <h3>Origin Mapping</h3>
              <p>Investigate hearing loss patterns based on geographical and ethnic distributions.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索弹窗 - 使用SearchModal样式 -->
    <transition name="modal">
      <div v-if="isModalVisible" class="modal-overlay" @click="handleOverlayClick">
        <div class="modal-content" @click.stop>
          <div class="page" :class="{ shazam: isMenuOpen }">
            <!-- 左上角触发按钮 -->
            <span class="menu_toggle" @click="toggleMenu">
              <i class="menu_open">&#9776;</i>
            </span>

            <!-- 搜索框 -->
            <div class="search-container" :class="{ 'search-visible': isMenuOpen }">
              <div class="search">
                <h3>Click on search icon, then type your keyword.</h3>
                <div>
                  <input 
                    v-model="searchQuery" 
                    type="text" 
                    placeholder="Search . . ." 
                    required
                    @keyup.enter="handleSearch"
                  >
                </div>
              </div>
            </div>

            <!-- 菜单选项 -->
            <ul class="menu_items">
              <li>
                <a href="#" 
                   @click.prevent="selectOption('genes')" 
                   :class="{ active: activeOption === 'genes' }">
                   Genes
                </a>
              </li>
              <li>
                <a href="#" 
                   @click.prevent="selectOption('pro')" 
                   :class="{ active: activeOption === 'pro' }">
                   Pro
                </a>
              </li>
              <li>
                <a href="#" 
                   @click.prevent="selectOption('ori')" 
                   :class="{ active: activeOption === 'ori' }">
                   Ori
                </a>
              </li>
            </ul>

            <!-- 主要内容区域 -->
            <div class="content">
              <div class="content_inner">
                <h1>Search Methods Introduction</h1>
                
                <div class="search-intro">
                  <div class="search-method">
                    <h2>Search by Genes</h2>
                    <p>Search through our comprehensive genetic database by specific gene names or identifiers. This method allows you to explore genetic variations, mutations, and their associations with hereditary hearing loss.</p>
                    <ul>
                      <li>Direct gene name search</li>
                      <li>Multiple gene comparison</li>
                      <li>Genetic variation analysis</li>
                    </ul>
                  </div>

                  <div class="search-method">
                    <h2>Search by Proteins</h2>
                    <p>Explore protein-related data including protein structures, interactions, and their roles in hearing mechanisms. This search method helps understand protein functions and their impact on hearing loss.</p>
                    <ul>
                      <li>Protein structure information</li>
                      <li>Protein-protein interactions</li>
                      <li>Functional analysis</li>
                    </ul>
                  </div>

                  <div class="search-method">
                    <h2>Search by Origins</h2>
                    <p>Investigate hearing loss patterns based on geographical and ethnic origins. This method provides insights into population-specific genetic variations and their correlation with hearing impairment.</p>
                    <ul>
                      <li>Geographic distribution</li>
                      <li>Population statistics</li>
                      <li>Ethnic-specific variants</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'SearchView',
  setup() {
    const router = useRouter()
    const searchQuery = ref('')
    const isModalVisible = ref(false)
    const isMenuOpen = ref(false)
    const activeOption = ref<string | null>(null)
    
    const filters = ref({
      types: [],
      startDate: '',
      endDate: '',
      sortBy: 'relevance'
    })

    const showModal = () => {
      isModalVisible.value = true
    }

    const closeModal = () => {
      isModalVisible.value = false
      isMenuOpen.value = false
    }
    
    const handleOverlayClick = (event: MouseEvent) => {
      if ((event.target as HTMLElement).classList.contains('modal-overlay')) {
        closeModal()
      }
    }
    
    const toggleMenu = () => {
      isMenuOpen.value = !isMenuOpen.value
    }
    
    const selectOption = (option: string) => {
      activeOption.value = option
      console.log('Selected option:', option)
    }

    const handleSearch = () => {
      console.log('Searching for:', searchQuery.value)
      console.log('Selected option:', activeOption.value)
      // 这里可以添加实际的搜索逻辑
    }

    return {
      searchQuery,
      isModalVisible,
      isMenuOpen,
      activeOption,
      filters,
      showModal,
      closeModal,
      handleOverlayClick,
      toggleMenu,
      selectOption,
      handleSearch
    }
  }
})
</script>

<style scoped>
.page-container {
  min-height: 100vh;
}

.hero-section {
  height: 80vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('https://gd-hbimg.huaban.com/f108816ba0f285dd62d964d0a98425c4e7e329c6203c5-IMGc7S_fw658webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.hero-content {
  max-width: 1200px;
  text-align: center;
  padding: 0 20px;
}

.main-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.5em;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
}

.stat-item {
  padding: 0 40px;
  text-align: center;
}

.stat-number {
  font-size: 2.5em;
  font-weight: bold;
  color: #ff9e60;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1.1em;
  color: rgba(255, 255, 255, 0.9);
}

.stat-divider {
  width: 2px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
}

.search-button {
  padding: 15px 40px;
  font-size: 1.2em;
  background-color: #ff9e60;
  border: none;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.search-button:hover {
  background-color: #ff8c40;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 158, 96, 0.4);
}

.search-icon {
  margin-left: 10px;
}

.intro-section {
  padding: 80px 20px;
  background-color: #f8f9fa;
}

.intro-content {
  max-width: 1200px;
  margin: 0 auto;
}

.intro-content h2 {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.intro-content p {
  font-size: 1.1em;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: center;
}

.search-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.method-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.method-card:hover {
  transform: translateY(-5px);
}

.method-card h3 {
  color: #ff9e60;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.method-card p {
  color: #666;
  font-size: 1em;
  text-align: left;
  margin-bottom: 0;
}

/* 下面是SearchModal的样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 80%;
  height: 75vh;
  max-width: 1200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.page {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.content {
  height: 200%;
  transform-origin: top left;
  transition: transform 0.7s cubic-bezier(1.000, 0.005, 0.240, 1.000);
  background-color: #f0f0f0;
}

.content_inner {
  height: 50%;
  overflow-y: auto;
  padding: 40px 60px;
}

.menu_toggle {
  z-index: 900;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
  width: 100px;
  height: 80px;
  background-color: #ff9e60;
  border-bottom-right-radius: 100%;
}

.menu_toggle i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-style: normal;
}

.menu_items {
  position: absolute;
  bottom: 0;
  left: 50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu_items li {
  height: 60px;
  margin-bottom: 30px;
  transform: translateX(-300px);
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.menu_items li:nth-child(2) {
  margin-left: 40px;
}

.menu_items li:nth-child(3) {
  margin-left: 80px;
}

.menu_items a {
  text-decoration: none;
  color: #584E4A;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 添加悬停效果 */
.menu_items a:hover {
  background-color: rgba(255, 158, 96, 0.1);
  color: #ff9e60;
}

/* 添加激活状态样式 */
.menu_items a.active {
  background-color: rgba(255, 158, 96, 0.2);
  color: #ff9e60;
}

/* 可选：添加点击效果 */
.menu_items a:active {
  transform: scale(0.98);
}

/* 菜单打开状态 */
.shazam .content {
  transform: rotate(-30deg) translateX(5%) translateY(-2%);
}

.shazam .menu_items li {
  transform: translateX(0);
  transition-delay: 0.45s;
}

.shazam .menu_items li:nth-child(2) {
  transition-delay: 0.47s;
}

.shazam .menu_items li:nth-child(3) {
  transition-delay: 0.48s;
}

/* 修改模态框动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
  transform: scale(0.98);
}

.modal-enter-to,
.modal-leave-from {
  opacity: 1;
  transform: scale(1);
}

/* 优化模态框本身的过渡 */
.modal-content {
  transform-origin: center center;
}

/* 添加新的样式 */
.content_inner h1 {
  color: #333;
  margin-bottom: 30px;
  font-size: 2em;
  text-align: center;
}

.search-intro {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.search-method {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-method h2 {
  color: #ff9e60;
  margin-bottom: 15px;
  font-size: 1.5em;
}

.search-method p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.search-method ul {
  list-style-type: none;
  padding: 0;
}

.search-method ul li {
  color: #777;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  transform: none; /* 覆盖菜单项的transform */
}

.search-method ul li:before {
  content: "•";
  color: #ff9e60;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* 修改搜索框相关样式 */
.search-container {
  position: absolute;
  bottom: 80px;
  right: 120px;
  opacity: 0;
  transform: rotate(0deg) translateX(100px);
  transition: all 0.7s cubic-bezier(1.000, 0.005, 0.240, 1.000);
  z-index: 900;
}

.shazam .search-container {
  opacity: 1;
  transform: rotate(0deg) translateX(0);
}

.search {
  margin: 20px;
}

.search h3 {
  color: #584E4A;
  margin-bottom: 15px;
  font-weight: normal;
}

/* 搜索框容器样式 */
.search > div {
  display: inline-block;
  position: relative;
}

/* 修改搜索图标样式，确保与圆框对齐 */
.search > div:after {
  content: "";
  background: #ff9e60;
  width: 3px; /* 稍微调细一点 */
  height: 15px; /* 调短一点 */
  position: absolute;
  top: 25px; /* 调整位置 */
  right: 0px; /* 调整位置 */
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* 搜索框样式 */
.search > div > input {
  color: #584E4A;
  font-size: 16px;
  background: transparent;
  width: 35px;
  height: 35px;
  padding: 10px;
  border: solid 3px #ff9e60;
  outline: none;
  border-radius: 35px;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
}

/* 占位符文本样式 */
.search > div > input::placeholder {
  color: #999;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* 聚焦时显示占位符 */
.search > div > input:focus::placeholder {
  opacity: 1;
}

/* 搜索框展开效果 */
.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
  width: 250px;
}

/* 确保搜索框在展开时搜索图标保持正确位置 */
.search > div > input:focus + div:after,
.search > div > input:not(:placeholder-shown) + div:after {
  right: 5px;
}

/* 搜索框容器在可见状态下的样式 */
.search-visible {
  opacity: 1 !important;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .main-title {
    font-size: 2.5em;
  }
  
  .subtitle {
    font-size: 1.2em;
  }
  
  .stats-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .stat-divider {
    width: 60px;
    height: 2px;
  }
  
  .search-methods {
    grid-template-columns: 1fr;
  }
  
  .content_inner {
    padding: 30px 20px;
  }
  
  .search-container {
    right: 60px;
    bottom: 40px;
  }
  
  .search > div > input:focus,
  .search > div > input:not(:placeholder-shown) {
    width: 180px;
  }
}
</style> 